<template>
  <div class="wrapper">
    <div class="item">基本信息</div>
    <el-form ref="form" label-width="80px" :model="form"  :rules="formRules">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="角色标签">
        <el-input v-model="form.tags"></el-input>
      </el-form-item>
    </el-form>
    <div class="item">权限信息</div>
    <div class="tree">
      <el-tree
          :data="treeData"
          node-key="id"
          show-checkbox
          check-strictly
          default-expand-all
          ref="tree"
          @check="hanleCheck"
          :props="defaultProps">
      </el-tree>

<!--      :default-expanded-keys="[1, 2, 3]"-->
<!--      :default-checked-keys="[5]"-->
    </div>
    <div class="btn">
      <el-button @click="submit" type="primary" round>添加</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "RoleAdd",
  data: function () {
    return {
      form: {
        name: '',
        description: '',
        tags: '',
        permissionList: []

      },
      formRules: {
        name: [
          {required: true, message: '请输入角色名称', trigger: 'blur'}
        ]
      },
      treeData: [],
      defaultProps: {
        children: 'submenu',
        label: 'name'
      }
    }
  },
  methods: {
    hanleCheck(data, node){
      const  _this = this
      let thisNode = this.$refs.tree.getNode(data.id)
      // 获取当前节点是否被选中
      const isChecked = this.$refs.tree.getNode(data).checked
      // 如果当前节点被选中，则遍历上级节点和下级子节点并选中，如果当前节点取消选中，则遍历下级节点并取消选中
      if(isChecked){
        // 判断是否有上级节点，如果有那么遍历设置上级节点选中
        thisNode.parent &&  setParentChecked(thisNode.parent)
        // 判断该节点是否有下级节点，如果有那么遍历设置下级节点为选中
        thisNode.childNodes && setChildreChecked(thisNode.childNodes,true)
      }else{
        // 如果节点取消选中，则取消该节点下的子节点选中
        thisNode.childNodes && setChildreChecked(thisNode.childNodes,false)
      }
      function setParentChecked(parentNode){
        // 获取该id的父级node
        // const parentNode = _this.$refs.tree.getNode(parentId)
        // 如果该id的父级node存在父级id则继续遍历
        parentNode.data.parent && setParentChecked(setParentChecked)
        //  设置该id的节点为选中状态
        _this.$refs.tree.setChecked(parentNode,true)
      }
      function setChildreChecked(node,isChecked){
        node.forEach(item => {
          item.childNodes && setChildreChecked(item.childNodes,isChecked)
          _this.$refs.tree.setChecked(item,isChecked)
        })
      }

    },
    async getAllTree() {
      let res = await this.$http.get('/api/permission/allTree')
      this.treeData = res.data
    },
    async submit() {
      this.$refs['form'].validate((valid)=> {
        if(valid){
          this.add()
        }else {
          return false;
        }
      })
    },
    async add() {
      this.form.permissionList = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      let res = await this.$http.post('/api/role/add', this.form)
      if(res.code == 0){
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.$router.push('/roleManage')
      }else {
        this.$message({
          message: res.message,
          type: 'error'
        })
      }
    }
  },
  created() {
    this.getAllTree()
  },
  mounted() {
    this.$bus.$on('page-refresh', name => {
      if (name === 'RoleManage') {
        this.getAllTree()
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 60%;
}
.item {
  font-size: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
  color: #909399;
}
.tree {
  padding-left: 40px;
}
.btn {
  text-align: right;
}
</style>
